<template>
   <div class="me">
       <div class="head-portrait">
          <div class="my-head-portrait"> <img src="/src/images/avatar.png" alt=""></div>
       </div>
       <divider></divider>
       <mt-cell title="个人资料"></mt-cell>
        <mt-cell title="我的优惠卷" is-link></mt-cell>
        <divider></divider>
        <mt-cell title="常见问题" is-link></mt-cell>
        <mt-cell title="使用条款" is-link></mt-cell>
        <mt-cell title="收藏" is-link></mt-cell>
        <mt-cell title="卡包" is-link></mt-cell>
        <mt-cell title="关于我们" is-link></mt-cell>
        <divider></divider>
        <mt-cell title="使用说明" is-link></mt-cell>
   </div>

</template>
<script>
import divider from "../public/divider.vue";
export default {
  data() {
    return {};
  },
  components: {
    divider
  }
};
</script>

<style lang="scss" scoped>
.me {
  background-color: #06c1ae;
  .head-portrait {
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    .my-head-portrait {
      width: 100px;
      height: 100px;
      //box-sizing: border-box;
      border: 10px solid rgba(0, 0, 0, 0.1);
      // overflow: hidden;
      border-radius: 50%;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
